<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.b1 {
			width: 100px;
			height: 100px;
			background-color: red;
		}

		.b2 {
			height: 300px;
			background-color: yellow;
		}
	</style>

	<script type="text/javascript">

		window.onload = function () {
	
			var box = document.getElementById("box");
			var btn = document.getElementById("btn");

			btn.onclick = function () {

				/*
				 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
				 * 	这样的执行的性能是比较差的，
				 *  所有推荐通过修改class属性来间接地修改样式
				 *  并且这种方式，可以使表现和行为进一步地分离
				 */
			
				// addClass(box,"b2");
				// removeClass(box,"b2");
				toggleClass(box, "b2");
			};

		};

		// 给一个元素添加指定的class属性值
		function addClass(obj, cn) {
			// 检查obj中是否含有cn
			if (!hasClass(obj, cn)) {
				obj.className += " " + cn;
			}
		}

		// 判断一个元素中是否有指定的class属性值
		function hasClass(obj, cn) {
			// 创建一个正则表达式
			// var reg = /\bb2\b/;
			var reg = new RegExp("\\b" + cn + "\\b");
			return reg.test(obj.className);
		}

		// 删除一个元素中指定的class属性
		function removeClass(obj, cn) {
			var reg = new RegExp("\\b" + cn + "\\b");  
			obj.className = obj.className.replace(reg, ""); // 删除class
		}

		// 切换指定的class
		function toggleClass(obj, cn) {
			// 判断obj中是否含有cn
			if (hasClass(obj, cn)) {
				//有，则删除
				removeClass(obj, cn);
			} else {
				//没有，则添加
				addClass(obj, cn);
			}
		}

	</script>
</head>

<body>

	<button id="btn">点击按钮以后修改box的样式</button>

	<br /><br />

	<div id="box" class="b1 b2"></div>
</body>

</html>